<template>
    
    <div class="page">
     <el-row class="pdf-show">
         <el-col :span="6">
            <div>
                <img v-if="imageUrl" :src="imageUrl" class="avatar" :style="{backgroundImage:'url('+imageUrl+')'}" @mousedown='signPic'>
            </div>
            <el-button type="danger">认证的公章</el-button>
<el-button type="danger" @click="makePdf">生成PDF</el-button>
         </el-col>
         <el-col :span="18" class="pdf-content">
             <div class="pdfcan" id="signContract">
                 <div class="pdf-container" style="height:100%">

                       <el-carousel height="100%" direction="vertical" :autoplay="false" @change="swiperChange" id="ddd">
           <el-carousel-item v-for="item in totalPage" :key="item" style="height:100%" :class='"swiper-item"+item'>
             <canvas  :id='"the-canvas" + item'></canvas>
           </el-carousel-item>
  </el-carousel>


                  
                 </div>
             </div>
         </el-col>
     </el-row>
    </div>
</template>
<script>
import * as  pdfjsLib from 'pdfjs-dist'
  import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
  import htmlToPdf from '@/utils/htmlpdf';
//   import html2Canvas from 'html2canvas'
// import JsPDF from 'jspdf'
export default {
    data(){
        return{
            url:"http://119.97.184.132:8080/profile/upload/2020/08/29/f9374060-a479-4b76-9817-9bfe06d3526b.pdf",
            imageUrl:"http://119.97.184.132:8080/profile/upload/2020/08/29/58f19557-d7dc-4816-92b7-3c35b1d0636d.png",
            totalPage:0,
            scrollTop:0,
            swipePage:1,
        }
    },
    created(){
         pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
          this.loadFile(this.url);

    },
    
    methods:{
            swiperChange(e){
             console.log(e);
             this.swipePage=e+1;
            },
          makePdf(){
           htmlToPdf.downloadPDF( document.querySelector('#signContract'),'123456');

          //console.log(test);
          },
       loadFile (url) {
                 
                  let loadingTask = pdfjsLib.getDocument(url);
                  loadingTask.promise.then((pdf) => {
                   console.log(pdf);
                  let pageNum = pdf.numPages
                  this.totalPage = pageNum;
               for (let i = 1; i <= pageNum; i++) {
            pdf.getPage(i).then((page) => {
             let viewport = page.getViewport({ scale: 1, });
          let scaledViewport = page.getViewport({ scale: 1, })
          let canvas = document.getElementById('the-canvas' + i)
          let context = canvas.getContext('2d')
          let CSS_UNITS = 96.0 / 72.0
          canvas.height = scaledViewport.height * CSS_UNITS
          canvas.width = scaledViewport.width * CSS_UNITS
          
          let renderContext = {
            transform: [CSS_UNITS,0,0,CSS_UNITS,0,0],
            canvasContext: context,
            viewport: scaledViewport
          }
          let renderTask = page.render(renderContext)
          renderTask.promise.then(() => {
          })
        })
      }
    }, function (reason) {
      console.error(reason)
    })
     
    },
    signPic(e){
       let dom = e.currentTarget.cloneNode(true);
       console.log(dom);
        document.querySelector('#signContract').appendChild(dom);//这个ID上新增搬运的章
        document.onmousemove = e => {  //拖动
              dom.style.left = (this.getPos(e).x - parseInt(dom.clientWidth / 2) - 10) + 'px';
              dom.style.top = (this.getPos(e).y - parseInt(dom.clientHeight / 2) + this.scrollTop - 10) + 'px';
              dom.className="sign-img mark";
              //console.log(dom);
        }
        document.onmouseup = e => { //桦开
              dom.style.left = this.getPos(e).x - '460'+"px";
              dom.style.top = (this.getPos(e).y + 80 - parseInt(dom.clientHeight / 2) - 105) + 'px';
           
        document.querySelector('#signContract').removeChild(dom);
        document.querySelector('.swiper-item'+this.swipePage).appendChild(dom);
        document.onmousemove = null;
        document.onmouseup = null;
        dom.onmousedown = this.moveTo;
        dom.onmouseenter = this.mouseenter;
        dom.onmouseleave = this.mouseleave;
        dom.onclick = this.deleteIt;
        }
    },
 

    
        moveTo(e) {
      let odiv = e.currentTarget; //获取目标元素
      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = e => {
        let left = e.clientX - disX;
        let top = e.clientY - disY;
 
        //限制区域
        if (left <= 0) {
          left = 0;
        } else if (left >= document.querySelector('.pdf-box').clientWidth - odiv.clientWidth) {
          left = document.querySelector('.pdf-box').clientWidth - odiv.clientWidth;
        } else {
          left = left - 10
        }
 
        if (top <= 0) {
          top = 0;
        } else if (top >= document.querySelector('.pdf-box').clientHeight - odiv.clientWidth) {
          top = document.querySelector('.pdf-box').clientHeight - odiv.clientWidth;
        } else {
          top = top - 10
        }
 
        //移动当前元素
        odiv.style.left = left + "px";
        odiv.style.top = top + "px";
      };
      document.onmouseup = e => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    mouseenter(e) {
      e.currentTarget.childNodes[0].style.display = "block"
    },
    mouseleave(e) {
      e.currentTarget.childNodes[0].style.display = "none"
    },
    deleteIt(e) {
         e.removeChild(e.currentTarget.parentNode);
      //document.querySelector('.pdf-box').removeChild(e.currentTarget.parentNode);
    },



       getPos(ev) {
         return {x: ev.clientX, y: ev.clientY};
        },
    }
}
</script>
<style>
.page{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f7f7f7;
}
.pdf-show{
    height: 100%;
}
.pdf-content{
    background: rgba(0,0,0, 0.5) ;
    height: 100%;
}
.pdfcan{
    
    height: calc(100% - 40px);
    /* background: rgba(0,0,0, 0.5) ; */
    margin: 20px;
    overflow: auto;
    text-align: center;
    
}
.pdf-container{
  position: relative;
}
.sign-img{
  position: absolute;
  z-index: 9999999999999999;
}
.el-carousel {
  height: 100%;
}
</style>